<template>
  <div>
    <el-form :model="loginUser" class="login" label-width="150px">
      <el-form-item label="用户名">
        <el-input v-model="loginUser.userName"></el-input>
      </el-form-item>
      <el-form-item label="密  码">
        <el-input v-model="loginUser.password" show-password @keyup.enter.native="login"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login" style="width: 100px">登 录</el-button>
        <el-button type="primary" @click="showRegisterUserDialogHandler" style="width: 100px">注 册</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="showRegisterUserDialog" v-if="showRegisterUserDialog" fullscreen :modal="false">
      <el-form :model="loginUser" label-width="130px">
        <el-form-item label="用户名">
          <el-input v-model="loginUser.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginUser.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="loginUser.password2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showRegisterUserDialog = false">取消</el-button>
        <el-button @click="registerUser">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      showRegisterUserDialog: false,
      loginUser: {
        userName: 'zs',
        password: '123',
        password2: '',
        code: '',
        uuid: '',
      },
      loginCodeUrl: '',
      registerCodeUrl: '',
      updatePasswordFormDialog: false,
      reNewPasswordTips: false,
      updatePasswordForm: {
        userName: '',
        oldPassword: "",
        newPassword: "",
        reNewPassword: ""
      }
    };
  },
  created() {
  },
  methods: {
    showRegisterUserDialogHandler() {
      this.loginUser = {};
      this.showRegisterUserDialog = true;
    },
    registerUser() {
      if (this.loginUser.password != this.loginUser.password2) {
        this.$message.error('两次输入的密码不一致,请核对');
        return;
      }
      let url = `/loginUser/loginUser/`;
      this.loginUser.msg="注册成功";
      this.ajax(url, this.loginUser, "POST").then(res => {
        if (res.success) {
          this.showRegisterUserDialog = false;
        }
      })
    },


    async getRegisterCode() {
      let result = await this.ajax("/captcha");
      this.sysUser.uuid = result.data.uuid;
      this.registerCodeUrl = result.data.base64Img;
    },
    login() {
      let url = `/loginUser/login`;
      this.ajax(url, this.loginUser, "POST").then(res => {
        if (res.success) {
          this.$store.commit("setUserName", this.loginUser.userName);
          this.setSession(this.projectName + "UserName", this.loginUser.userName);
          this.setSession(this.projectName + "Token", res.data.authorization);
          this.$router.replace('/Main')
        }
      })
    },
  }
}
</script>

<style scoped>
.login {
  position: absolute;
  right: 37%;
  top: 20%;
  z-index: 200;
  width: 500px;
  height: 300px;
  border-radius: 5px;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
